<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
	.left {width:1%;float:left;height:100%;min-height:500px;}
	.right {width:99%;float:left;height:100%;min-height:500px;}
	.showlist{width:95%;height:100%;min-height:400px;}
	.promtp{width:auto;}
	.list{width:100%;height:100%;min-height:300px;}
	ul{min-width:130px;}
	li{padding:3px;height:19px;text-align:20px;min-width:40px;}
</style>
    <title>山东省地下水监测系统</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <%@ include file="App/Common/intoHead.jsp" %>
</head>

<body>
    <%@ include file="App/Common/header.jsp" %>

    <div id="bjui-container" class="clearfix">
        <%@ include file="App/Common/leftMenu.jsp" %> 

         <div id="bjui-navtab" class="tabsPage">
               <div class="tabsPageHeader">
               <div class="tabsPageHeaderContent">
                     <ul class="navtab-tab nav nav-tabs">
                        <li data-url=""><a href="javascript:;"><span><i class="fa fa-home"></i> #maintab#</span></a></li>
                    </ul> 
                </div>
                <div class="tabsLeft"><i class="fa fa-angle-double-left"></i></div>
                <div class="tabsRight"><i class="fa fa-angle-double-right"></i></div>
                <div class="tabsMore"><i class="fa fa-angle-double-down"></i></div>
            </div>
          	<ul class="tabsMoreList">
                <li><a href="javascript:;">#maintab#</a></li>
            </ul>
            <div class="navtab-panel tabsPageContent">
               <div class="navtabPage unitBox">
                    <div class="bjui-pageContent" style="background:#FFF;background-image:url(<%=request.getContextPath()%>/Static/BJUI/themes/blue/main.png)">                                              
                    <div style="width:100%;height:40px;padding:8px;">
                     <form id="pagerForm" data-toggle="ajaxsearch" method="post" action="<%=request.getContextPath()%>/equi/selectIndex.do">
                       <label>地区：</label>
                       <select name="areaCode">
                         <option value="">请选择</option>
                         <c:forEach var="area" items="${areaList}">
                          <option value="${area.ucode}">${area.uname}</option>
                         </c:forEach>
                       </select>
                       <label>测点名称:</label>
                       <input type="text" name="stationname" id="stationname"/>
                     <button type="submit" class="btn-default" data-icon="refresh" onclick="loadMap()">搜索</button>
	            	 <button type="button" class="btn-default" onclick="kong()">清空</button>
	            	 <input type="hidden" id="sname">
	            	 <input type="hidden" id="level">
	            	 <input type="hidden" id="temp">
    				  </form>
    				  
				<a href="#" id="rtuEqui" 
    				  class="on-default edit-row" data-toggle="navtab" data-id="equiView" data-width="500" data-height="500" 
    				  data-title="查看数据" data-mask="true" style="display:none"></a>
                    </div>
                    <div id="mapDiv" style="position:absolute;width:100%; height:99%"></div> 
					<script type="text/javascript">
					function kong(){
					$("#stationname").val("");
					$(".btn-default").blur(); 
					}
					function loadMap() 
	{
		//初始化地图对象 
	   	var map=new TMap("mapDiv"); 
		var zoom = 9;
		var num = ${zoom};		
		if(num > 1)
		{
			zoom = 9;
		}
		var lng = ${lng};		
		var lat = ${lat};	
		var markerClusterer; 
	   	//设置显示地图的中心点和级别 ,根据当前登录人来确定经纬度
		map.centerAndZoom(new TLngLat(lng,lat),zoom); 
		//允许鼠标滚轮缩放地图 
		map.enableHandleMouseScroll(); 
		var pt = ${data};		
		var markers = [];	 		 		
		for (var i = 0; i < pt.length; i++) {
		  					    
			 var lnglat = new TLngLat(pt[i].longitude, pt[i].latitude);
			 //创建标注对象
			 var market = new TMarker(lnglat);
			 //像地图添加标注
			 markers.push(market);	
			 //注册标注的点击事件							
			TEvent.addListener(market,"click",function(p){ 
				var lngg = this.getLngLat().getLng();
				var latt = this.getLngLat().getLat();
				try{
				$("#bjui-container").navtab('closeTab','equiView');
				}catch(e){alert(e.message);}
				var btn = $.CurrentNavtab.find("#rtuEqui");
				var url = "<%=request.getContextPath()%>/equi/selectEquipLine.do";
				var str = url.split("?");
				var href = str[0] + "?"+Math.random()+"="+Math.random()+"&longitude=" + lngg +"&latitude=" + latt;		
				try{
				$(p).navtab({id:'equiView', url:href, title:'查看数据'});
				}catch(e){alert(e.message);}
            });
             TEvent.addListener(market,"mouseover",function(){
             var lngg = this.getLngLat().getLng();
			 var latt = this.getLngLat().getLat();
			 var url = "<%=request.getContextPath()%>/equi/selectEquipAjax.do";
			 var str = url.split("?");
			 var href = str[0] + "?"+Math.random()+"="+Math.random()+"&longitude=" + lngg +"&latitude=" + latt;
			 var html=[]; 
             html.push('<div style="height:78px;">');
             $.ajax({
             scriptCharset:"utf-8",
             contentType:"application/x-www-form-urlencoded;charset=utf-8",
             dataType:"json", 
             type:"post",
             url:href,
             async:false,
             success:function(data1){
             //var json=eval("("+data1[0]+")");
				$("#sname").val(data1.stationname);
				$("#level").val(data1.waterlevel);
				$("#temp").val(data1.watertemperature);
             }
             });
             html.push('<ul>');
             html.push('<li><b>属性数据</b></li>');
             html.push('<li>设备名称:'+$("#sname").val()+'</li>');
             html.push('<li>水&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位:'+$("#level").val()/1000+'m</li>');
             html.push('<li>水&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;温:'+$("#temp").val()+'°</li>');
             html.push('</ul>');
             html.push('</div>');
             var config = {
	            offset:new TPixel(0,0),
	            position:this.getLngLat()
	         };
	         customerWinInfo=new TLabel(config);
	         customerWinInfo.setTitle('');
	         customerWinInfo.setLabel(html.join(''));
	         customerWinInfo.getObject().style.zIndex = 10000;
	         map.addOverLay(customerWinInfo);
	         var obj = customerWinInfo.getObject();
	         var width = parseInt(obj.offsetWidth);
	         var height = parseInt(obj.offsetHeight);
	         var icon = this.getIcon();
	         var anchor_icon = icon.getAnchor();
	         var pixel = new TPixel(width/-2,height/-2-anchor_icon[1]);
	         customerWinInfo.setOffset(pixel); 
             });
             TEvent.addListener(market,"mouseout",function(){
	         map.removeOverLay(customerWinInfo);
	     }); 
             
		} 
		var config = { 
				markers:markers
		};
		//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。 
		markerClusterer = new TMarkerClusterer(map,config);
	} 
				   	loadMap();
					</script>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <%@ include file="App/Common/footer.jsp" %>
</body>
</html>